<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2022-05-26 13:26:44
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2023-03-22 10:55:45
 * @FilePath: /tea-garden-web/src/components/component-radial-bar.vue
 * @Description: 玉珏图
-->
<template>
  <div class="radial-bar">
    <div class="chart-area" id="chart"></div>
    <div class="legend-area">
      <el-row class="legend-item" v-for="(item, index) in data" :key="index">
        <el-col :span="4">
          <span
            class="color"
            :style="{ 'background-color': item.color }"
          ></span>
        </el-col>
        <el-col :span="12">
          <span class="label" v-text="item.label"></span>
        </el-col>
        <el-col :span="8">
          <span
            class="area"
            :style="{ color: item.color }"
            v-text="item.area+'亩'"
          ></span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { Chart } from '@antv/g2'

export default {
  data () {
    return {
      chart: null
    }
  },
  props: {
    data: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  watch: {
    data () {
      if (this.chart) {
        const chartData = Object.assign([], this.data)
        this.chart.changeData(chartData.reverse())
      }
    }
  },
  methods: {
    initChart () {
      this.chart = new Chart({
        container: 'chart',
        autoFit: true
      })
      const chartData = Object.assign([], this.data)
      this.chart.data(chartData.reverse())

      this.chart.scale('percent', {
        min: 0,
        max: 1
      })

      this.chart.legend(false)
      this.chart.axis('label', {
        grid: null,
        tickLine: null,
        line: null,
        label: null
      })

      this.chart.coordinate('polar', { innerRadius: 0.1 }).transpose()
      this.chart
        .interval({
          background: { style: { fill: '#F2F3F5', fillOpacity: 1 } }
        })
        .position('label*percent')
        .color('color', (val) => {
          return val
        }).style({
          lineCap: 'round'
        }).size(6)

      this.chart.interaction('element-active')

      this.chart.render()
    }
  },
  mounted () {
    this.initChart()
  },
  beforeUnmount () {
    if (this.chart) {
      this.chart.destroy()
    }
  }
}
</script>

<style lang='scss'>
.radial-bar {
  height: 130px;
  .chart-area {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    height: 100%;
  }
  .legend-area {
    display: inline-block;
    width: 50%;
    height: 100%;
    padding-left: 10px;
    padding-right: 10px;
    .legend-item {
      .color {
        display: inline-block;
        width: 100%;
        width: 11px;
        height: 11px;
        border-radius: 5px;
        text-align: right;
      }
      .label {
        font-size: 12px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #8a94a6;
      }
      .area {
        display: inline-block;
        width: 100%;
        font-size: 12px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        text-align: right;
      }
    }
  }
}
</style>
